
<template>
  <div class="flex justify-between text-[#e54c5f]">
    <div class="flex items-center cursor-pointer" @click="handleGo">
      <el-icon>
        <ArrowLeftBold />
      </el-icon>
      <span class="pl-5">{{ $t('订单详情') }}</span>
    </div>
    <div >
      <el-button type="primary" :icon="BottomLeft"
      v-btn="['all', 'web_order_refund']"
      @click="handleClick" v-if="form.pay_status === 1 || form.pay_status === 4 || form.pay_status === 7">{{ $t('申请退款') }}</el-button>
    </div>
  </div>

  <el-card class="my-5">
    <template #header>
      <div class="card-header">
        <span>{{ $t('基本信息') }}</span>
      </div>
    </template>
    <el-skeleton :rows="5" animated :loading="loading">
    <div class="px-24">
    <div class="flex"><div class="flex-1">
      <ul class="text-center text-base">
        <li class="flex justify-around mb-2">
          <span class="w-36 text-right">{{ $t('商户订单号') }}</span>
          <span class="w-1/2 text-left">{{ form.merchant_order_no }}</span>
        </li>
        <li class="flex justify-around mb-2">
          <span class="w-36 text-right">{{ $t('订单状态') }}</span>
          <span class="w-1/2 text-left">{{ form.pay_status_name }}</span>
        </li>
        <li class="flex justify-around mb-2">
          <span class="w-36 text-right">{{ $t('订单金额') }}</span>
            <span class="w-1/2 text-left">{{ numberToCurrencyNo(form.amount) }} {{ form.currency }}</span>
        </li>
        <li class="flex justify-around mb-2">
          <span class="w-36 text-right">{{ $t('手续费') }}</span>
            <span class="w-1/2 text-left">{{ numberToCurrencyNo(form.fee) }} {{ form.currency }}</span>
        </li>
        <li class="flex justify-around mb-2">
          <span class="w-36 text-right">{{ $t('创建订单时间') }}</span>
          <span class="w-1/2 text-left">{{ formatDates(form.create_time) }}</span>
        </li>
        <li class="flex justify-around mb-2">
          <span class="w-36 text-right">{{ $t('完成支付时间') }}</span>
          <span class="w-1/2 text-left">{{ formatDates(form.finish_time) }}</span>
        </li>
        <li class="flex justify-around mb-2">
          <span class="w-36 text-right">{{ $t('入账时间') }}</span>
          <span class="w-1/2 text-left">{{ formatDates(form.deposit_time) }}</span>
        </li>
        <li class="flex justify-around mb-2">
          <span class="w-36 text-right">{{ $t('入账金额') }}</span>
          <span class="w-1/2 text-left">
              {{ numberToCurrencyNo(form.settlement_amount) }} {{ form.settlement_currency }}
          </span>
        </li>
        <li class="flex justify-around mb-2">
          <span class="w-36 text-right">{{ $t('入账状态') }}</span>
          <span class="w-1/2 text-left">{{ form.is_deposit_name }}</span>
        </li>
      </ul>
    </div>
    <div class="flex-1"></div>
    </div></div>
    </el-skeleton>
  </el-card>
  <el-card class="mb-4" v-if="payState.indexOf(form.pay_status) !== -1">
  <template #header>
    <div class="card-header">
      <span>{{ $t('退款记录') }}
          <el-tag>{{ form.refund_real_amount ? $t("已退款金额") + "：" + numberToCurrencyNo(form.refund_real_amount) + " " + form.currency : "" }}</el-tag>
      </span>
    </div>
  </template>
  <el-skeleton :rows="5" animated :loading="loading">
    <template v-if="form.refund_data && form.refund_data.length > 0">
      <!-- 如果 refund_data 不为空 -->
      <el-table :data="form.refund_data" border v-loading="loading">
      <el-table-column :label="$t('退款金额')" align="center">
        <template v-slot="scope">
          <span>{{ scope.row.amount }} {{ form.currency }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="arn_number" :label="$t('收单机构参考号')" align="center" />
      <el-table-column prop="status" :label="$t('退款状态')" align="center">
        <template v-slot="scope">
            <span>{{ scope.row.status_name }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="refund_time" :label="$t('退款时间')" align="center" :formatter="formatterTime" />
    </el-table>
    </template>
    <template v-else>
      <p class="text-center text-base">{{ $t('暂无退款记录') }}</p>
    </template>
  </el-skeleton>
</el-card>
  <DialogForm @closeDialog="closeDialog" @submitForm="dialogSubmit" :dialogVisible="dialogVisible" :form="dialogForm" />
</template>
<script setup>
import { ref, reactive, onMounted } from "vue";
import { useRouter, useRoute } from "vue-router";
import { ordersInfoApi, accountRefundApi } from "@/api/account/index";
import DialogForm from "./DialogForm.vue";
import { ElMessage } from "element-plus";
import { BottomLeft } from '@element-plus/icons-vue'
import { formatDates, formatterTime, numberToCurrencyNo } from "@/utils/utils";
const payState = ref([4, 5, 6, 7])
const loading = ref(false);
const dialogVisible = ref(false);
const dialogFormData = {
  amount: '',
  order_no: "",
  can_refund_amount: 0,
  currency: "USD",
};
const dialogForm = reactive({ ...dialogFormData });
const router = useRouter();
const form = reactive({});
const { ...route } = useRoute();

onMounted(() => {
  if (route.query.order_no) {
    getData(route.query.order_no);
  }
});
const getData = async (order_no) => {
  loading.value = true;
  try {
    const res = await ordersInfoApi({ order_no: order_no });
    Object.assign(form, res);
    loading.value = false;
  } catch (error) {
    loading.value = false;
  }
};
// 打开窗口
const handleClick = () => {
  dialogVisible.value = true;
  Object.assign(dialogForm, {
    order_no: form.order_no,
    can_refund_amount: form.can_refund_amount,
    currency: form.currency,
  });
};
const dialogSubmit = async (param) => {
  try {
    const res = await accountRefundApi(param);
    ElMessage({
      showClose: true,
      message: res.msg,
      type: "success",
    });
    getData(route.query.order_no);
    dialogVisible.value = false;
  } catch (error) {
    dialogVisible.value = false;
  }
};
// 关闭窗口
const closeDialog = () => {
  dialogVisible.value = false;
  Object.assign(dialogForm, dialogFormData);
};

const handleGo = () => {
  router.replace(`/acquiring/order`);
};
</script>
